﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MovieInfo.aspx.cs" Inherits="Movie.web.MovieInfo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>首页:最新上映</title>
    <style type="text/css">
        *{ margin:0; padding:0;}
        body{ width:80%; margin :0 auto; font-size:13px;}
        
        #divFrame{border:solid 1px #666;width:301px;overflow:hidden}
        #divFrame .clsHead{background-color:#eee;padding:8px;height:18px;cursor:hand}
        #divFrame .clsHead h3{padding:0px;margin:0px;float:left}
        #divFrame .clsHead span{float:right;margin-top:3px}
        #divFrame .clsContent{padding:8px}
        #divFrame .clsContent ul {list-style-type:none;margin:0px;padding:0px}
        #divFrame .clsContent ul li{ float:left;width:95px;height:23px;line-height:23px}
        #divFrame .clsBot{float:right;padding-top:5px;padding-bottom:5px}
        .GetFocus{background-color:#eee}
        
        a{ text-decoration:none; color:Black;}
        img{ display:block; width:60%; height:40%; -webkit-transition:width 1s,height 1s, -webkit-transform 2s;}
        img:hover{  -webkit-transform:rotate(360deg);}
        span{ color:Red;}
        
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".clsHead").click(function () 
            {
                if ($(this).next().is(":visible"))
                {
                    $(this).next().hide();
                    $(this).find("img").attr("src", "images/a2.jpg.gif");


                }
                else 
                {
                    $(this).next().show();
                    $(this).find("img").attr("src", "images/a1.jpg.gif");
                }

            });

            $(".clsBot").click(function () {
                if ($(this).text() == "简化") {
                    {
                        $("ul li:gt(4):not(:last)").hide();
                        $(this).children("a").text("更多");
                       
                    }

                } else {
                    $("ul li:gt(4):not(:last)").show();
                    $(this).children("a").text("简化");

                }
            });
        });

    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divFrame">
        <asp:Repeater ID="Repeater1" runat="server">
       <HeaderTemplate>
          <div class="clsHead">
              <h3>图书分类</h3>
              <span><img src="images/a2.jpg.gif" alt=""/></span>
         </div>
         <div class="clsContent">
          <ul>
         </HeaderTemplate>
         <ItemTemplate>
         <li><a href="#"><%# Eval("TypeName")%></a></li>
         </ItemTemplate>
         <FooterTemplate>
         </ul>
         <div class="clsBot"><a href="#">简化</a><img src="images/a5.jpg.gif" alt=""/></div>
         </div>
         </FooterTemplate>

         
         </asp:Repeater>
         </div>
   

      <div style=" margin-top:60px;">
        <asp:DataList ID="DataList1" runat="server" RepeatColumns="5">
     
        <ItemTemplate>
          <a href='<%#"Detail.aspx?MovieId="+Eval("MovieId") %>'>
          <asp:Image ID="Image1" runat="server" ImageUrl='<%#Eval("Mpicture") %>' />
          电影名称:<asp:Literal ID="Literal1" runat="server" Text='<%#Eval("Mname") %>' ></asp:Literal><br />
           </a>
           电影价格:<asp:Label ID="Label1" runat="server" Text='<%#Eval("Mprice") %>'></asp:Label>￥<br />
           <asp:Button ID="btnBuy" runat="server" BackColor="#ffffcc" Width="80Px" 
                Text="购买"  />   
           <%-- oncommand="btnBuy_Command"  CommandArgument='<%#Eval("MovieId") %>'--%>      
        </ItemTemplate>
        
        </asp:DataList>
    </div>
    </form>
</body>
</html>
